<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="page bg bg-fff">
            <up-form :model="form" ref="uForm" label-width="150" :borderBottom="false">
                <up-form-item label="户籍情况">
                    <view class="itemBody radioGroup flex">
                        <up-radio-group v-model="form.familyStatus" size="15" active-color="#FAA000" @change="changeFamilyStatus">
                            <up-radio label-size="15" v-for="item in familyStatusList" :key="item.value" :name="item.value" :label="item.label"></up-radio>
                        </up-radio-group>
                    </view>
                </up-form-item>

                <up-form-item label="居住证/积分" v-if="form.familyStatus === 'non-shanghai'">
                    <picker mode="selector" :range="residencePermitList" range-key="label" :value="residencePermitIndex" @change="residencePermitCallback">
                        <view class="valueWrap flex">
                            <view class="value right-3 fontBold">{{ residencePermitText || '请选择居住证/积分'}}</view>
                            <up-icon name="arrow-down-fill" size="14" color="#999"></up-icon>
                        </view>
                    </picker>
                </up-form-item>

                <up-form-item label="是否为首套">
                    <view class="valueWrap flex">
                        <up-switch class="switchBtn" slot="right" active-color="#007235"
                            v-model="form.isFirst"></up-switch>
                    </view>
                </up-form-item>

                <up-form-item label="家庭成员数">
                    <view class="valueWrap fontBold">
                        <up-input v-model="form.familyMember" type="number" placeholder="请输入家庭成员数" border="none" />
                    </view>
                    <template #right>
                        <text class="unit">人</text>
                    </template>
                </up-form-item>

                <up-form-item label="新购房面积">
                    <view class="valueWrap fontBold">
                        <up-input v-model="form.newHouseArea" type="digit" placeholder="请输入新购房面积" border="none" />
                    </view>
                    <template #right>
                        <text class="unit">m²</text>
                    </template>
                </up-form-item>

                <up-form-item label="新购房单价">
                    <view class="valueWrap fontBold">
                        <up-input v-model="form.newHousePrice" type="digit" placeholder="请输入新购房单价" border="none" />
                    </view>
                    <template #right>
                        <text class="unit">元/m²</text>
                    </template>
                </up-form-item>

                <up-form-item label="已有房产总面积">
                    <view class="valueWrap fontBold">
                        <up-input v-model="form.hasHouseArea" type="digit" placeholder="请输入已有房产总面积" border="none" />
                    </view>
                    <view class="col-grey font12">*不含本次新购房面积</view>
                    <template #right>
                        <text class="unit">m²</text>
                    </template>
                </up-form-item>
            </up-form>

            <view class="submitBtn bg-theme col-fff font15" :class="{'disabled': disabledSubmit}" :disabled="disabledSubmit" @click="submit">开始计算</view>

            <up-gap :height="40"></up-gap>
            <share-btn :display="scrollAnimate"></share-btn>
        </view>
    </block>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useConfigStore } from '@/store/index';
    import { isBoolean } from '@/common/common';
    import { dispatchClient } from '@/common/api-adviser';
    export default {
        data() {
            return {
                familyStatusList: [{
                    label: '上海户籍',
                    value: 'shanghai'
                },{
                    label: '非上海户籍',
                    value: 'non-shanghai'
                }],
                form: {
                    familyStatus: 'shanghai',
                    residencePermit: 'full',
                    isFirst: true,
                    newHouseArea: '',
                    newHousePrice: '',
                    hasHouseArea: '',
                    familyMember: '',
                },
                residencePermitIndex: 0,
                residencePermitList: [{
                    label: '居住证已满三年或积分满120分',
                    value: 'full'
                },{
                    label: '居住证未满三年或积分不足120分',
                    value: 'notFull'
                }],
                scrollAnimate: false,
                productId: '',
                title: '',
                share: false,
                start_time: 0
            }
        },
        computed:{
            ...mapState(useConfigStore, ['scene']),
            ...mapState(useUserInfoStore, ['userInfo']),
            residencePermitText() {
                return this.residencePermitList.find(item => item.value === this.form.residencePermit)?.label || '';
            },

            disabledSubmit() {
                return !this.form.familyMember || this.form.familyMember === "0" || !this.form.newHouseArea || this.form.newHouseArea === "0" || !this.form.newHousePrice || this.form.newHousePrice === "0";
            }
        },
        onShareAppMessage(res) {
            return {
                title: `公积金额度查询，点击查看详情`,
                path: `/pages/menus/tools/calculator/accumulate-limit-query?productId=${this.productId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=公积金额度查询-${this.productId}-${this.title}`,
            	//#ifdef MP-TOUTIAO
            	templateId: '3e9tvurff9vob6ot7u',
            	//#endif
            }
        },
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `公积金额度查询，点击查看详情`,
                imageUrl: 'https://shoss.ipangsell.com/xcx/xcx-share-image.jpg',
                query: `productId=${this.productId}&title=${this.title}&puid=${this.userInfo.id}&share=true&prepage=公积金额度查询-${this.productId}-${this.title}`
            }
        },
        //#endif
        onLoad(options) {
            const that = this;
            let { productId='', title='', puid='', share=false } = options;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.share = isBoolean(share);
            this.start_time = (new Date()).getTime();
            
            if(this.productId){
                uni.$sensors.track('houseModuleView', {
                    name: 'housing_tax_query_onload',
                    pid: this.productId,
                    exts: {
                        product_name: this.title,
                        product_id: this.productId,
                        page_name: `房产税查询onload`
                    }
                })
            }
            
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
            uni.$check_and_login(function () {
                //绑定客户
                dispatchClient({
                    share: that.share,
                    puid: puid,
                    pid: that.productId
                });
            })
        },
        onUnload(){
            let end_time = (new Date()).getTime()
            if(end_time - this.start_time > this.$defaultPageOutTime) {
                uni.$sensors.track('houseModuleBack', {
                    name: 'housing_tax_query_back',
                    pid: this.productId,
                    exts: {
                        product_name: this.title,
                        product_id: this.productId,
                        page_name: `房产税查询back`
                    }
                })
            }else{
                uni.$sensors.track('houseModuleOut', {
                    name: 'housing_tax_query_out',
                    pid: this.productId,
                    exts: {
                        product_name: this.title,
                        product_id: this.productId,
                        page_name: `房产税查询out`
                    }
                })
            }
        },
        onPageScroll() {
            const that = this;
            that.scrollAnimate = true;
            uni.$u.debounce(function() {
                that.scrollAnimate = false;
            }, 500);
        },
        methods:{
            ...mapActions(useUserInfoStore, ['setPuid']),
            
            // 点击户籍情况回调
            changeFamilyStatus(e) {
                console.log(e);
            },

            // 点击居住证/积分回调
            residencePermitCallback(e) {
                const index = e.detail.value;
                this.form.residencePermit = this.residencePermitList[index].value;
                this.residencePermitIndex = index;
            },

            // 提交
            submit() {
                console.log(this.form);
                if(this.disabledSubmit) return;

                uni.navigateTo({
                    url: `/pages/tools/calculator/housing-tax-result?paramsObj=${encodeURIComponent(JSON.stringify(this.form))}`
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    ::v-deep .u-radio-group{
        justify-content: flex-end;
    }
    .page{
        padding: 0rpx 30rpx;
        min-height: 100vh;
        overflow: hidden;
        .valueWrap{
            justify-content: flex-end;
        }
        .formItemCon{
            justify-content: space-between;
            .inpBox{
                width: calc(100% - 100rpx);
            }
            .unit{
                width: 100rpx;
                text-align: right;
            }
        }
        .itemBody{
            max-width: 70vw;
            justify-content: flex-end;
            .bodyTxt{
                margin-right: 20rpx;
                justify-content: flex-end;
                .inp{
                    text-align: right;
                }
            }
        }
        .submitBtn{
            height: 80rpx;
            line-height: 80rpx;
            border-radius: 10rpx;
            margin-top: 70rpx;
            text-align: center;
            &.disabled{
                background-color: #ccc;
                color: #fff;
            }
        }
    }
</style>